<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MOON</title>
<link rel="stylesheet" th:href="@{/moon/css/bootstrap.css}" />
<link rel="stylesheet" th:href="@{/icon/css/font-awesome.min.css}" />
</head>
<body class="bg-c">
	<div class="container-fluid" id="app">
		<div class="row">
			<div class="col text-center bg-success text-white shadow">分页数据</div>
		</div>
		<div class="row mt-2">
			<div class="form-inline">
				<input type="text" class="form-control form-control-sm" v-model="depart" placeholder="请输入院系"/>
				<select class="form-control form-control-sm ml-1" v-model="sex">
					<option value="">不限</option>
					<option value="男" >男</option>
					<option value="女" >女</option>
				</select>
				<button class="btn btn-sm btn-outline-success ml-1" @click="showdata()">查询</button>
			</div>
		</div>
		<div class="row mt-2">
			<div v-for="s in studentdata">
				<div class="card float-left m-2 shadow" style="width:300px;height:280px;">
					<div class="card-header">{{s.id}}/{{s.name}}</div>
					<div class="card-body">
						<div>{{s.sex}}</div>
						<div>{{s.birth | dateFormat}}</div>
						<div>{{s.department}}</div>
						<div>{{s.address}}</div>
						<div><button class="btn btn-sm btn-outline-primary" @click="deletedata(s.id)">删除</button></div>
						<div><button class="btn btn-sm btn-outline-primary" @click="updatedata(s.id)">修改</button></div>
					</div>
				</div>
			</div>
			<div class="clearfix"></div>
			<!-- <table class="table">
				<tr v-for="s in studentdata">
					<td>{{s.id}}</td>
					<td>{{s.name}}</td>
					<td>{{s.sex}}</td>
					<td>{{s.birth | dateFormat}}</td>
					<td>{{s.department}}</td>
					<td>{{s.address}}</td>
				</tr>
			</table> -->
		</div>
		<div class="row mt-2">
			<div id="pager" class="pagination"></div>
		</div>
	</div>
	<!-- js -->
	<script th:src="@{/moon/js/jquery.js}"></script>
	<script th:src="@{/moon/js/vue.js}"></script>
	<script th:src="@{/layer/layer.js}"></script>
	<script th:src="@{/page/jqpaginator.js}"></script>
	<script th:inline="javascript">
	var pageNum = 1;
		var app = new Vue({
			el:"#app",
			data:{
				studentdata:[],
				depart:"",
				sex:"",				
			},
			methods:{
				showdata:function(){
					$.post(
						"/moon/Student/select",
						{
							depart:app.depart,
							sex:app.sex,
							pageNum:pageNum,
							pageSize:5
							},
						function(data){
							//alert(JSON.stringify(data))
							app.studentdata = data;
							/* $("#pager").jqPaginator("option",{
								totalPages : data.pagecount
							}); */
						},						
					);
				},
				 deletedata:function(id){
					$.post(
					"/moon/Student/del",
					{id : id},
					function(data){
						//app.$options.methods.showdata();
						app.showdata();
					}					
					);
					
				},
				updatedata:function(id){
					$.post(
						"/moon/Student/update",
						{id : id}
					);
				}
			},
			filters:{
				dateFormat:function(time) {
				    var date=new Date(time);
				    var year=date.getFullYear();
				    /* 在日期格式中，月份是从0开始的，因此要加0
				     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				     * */
				    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
				    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
				    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
				    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
				    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
				    // 拼接
				    return year+"-"+month+"-"+day;
				}
			}
					
		});
		$("#pager").jqPaginator({
			totalPages : 100,
			currentPage : 1,
			onPageChange : function(num,type){
				pageNum = num;
				app.showdata();
			}
		});
	</script>
</body>
</html>